<template>
  <je-modal
    v-model:visible="visible"
    width="600px"
    :title="title"
    height="auto"
    :resize="false"
    :maximizable="false"
    cancel-button
    :ok-button="handleOk"
    @close="handleClose"
  >
    <je-form ref="formRef" :model="formState" :rules="rules" autocomplete="off">
      <je-form-item label="编码" name="RESOURCEBUTTON_CODE">
        <je-input v-model:value.trim="formState.RESOURCEBUTTON_CODE" />
      </je-form-item>
      <je-form-item label="名称" name="RESOURCEBUTTON_NAME">
        <je-input v-model:value.trim="formState.RESOURCEBUTTON_NAME" />
      </je-form-item>
      <je-form-item label="类型" name="RESOURCEBUTTON_TYPE">
        <je-select
          v-model:value="formState.RESOURCEBUTTON_TYPE"
          allow-clear
          config-info="JE_FUNC_BUTTON_TYPE,row.RESOURCEBUTTON_TYPE,code,S"
          :get-popup-container="getPopupContainer"
        />
      </je-form-item>
    </je-form>
  </je-modal>
</template>

<script>
  import { ref, toRefs, reactive, defineComponent } from 'vue';
  import { Modal, Form, Input, Select } from '@jecloud/ui';

  import { ButtonSave } from '@/api/index';

  export default defineComponent({
    name: 'AddButton',
    components: {
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeModal: Modal,
      JeSelect: Select,
    },
    props: {
      visble: {
        type: Boolean,
        default: false,
      },
      recordData: {
        type: Object,
        default: () => {},
      },
    },
    emits: ['changeModal'],
    setup(props, { emit }) {
      const state = reactive({
        visible: props.visble,
        title: '添加按钮',
        funcId: props.recordData.JE_CORE_FUNCINFO_ID,
        formRef: ref(),
        formState: {
          RESOURCEBUTTON_CODE: '',
          RESOURCEBUTTON_NAME: '',
          RESOURCEBUTTON_TYPE: 'GRID',
        },
        rules: {
          RESOURCEBUTTON_CODE: [
            { required: true, message: '请输入编码' },
            { max: 40, message: '不能大于40个字符' },
            {
              pattern: '^[^\u4e00-\u9fa5]+$',
              message: '编码不能含有中文',
            },
          ],
          RESOURCEBUTTON_NAME: [{ required: true, message: '请输入名称' }],
          RESOURCEBUTTON_TYPE: [{ required: true, message: '请选择类型' }],
        },
      });

      const methods = {
        getPopupContainer() {
          return document.body;
        },
        handleClose() {
          state.visible = false;
          emit('changeModal', { visible: false });
        },

        handleOk({ button }) {
          state.formRef
            .validate()
            .then(() => {
              methods.handleSave(button);
            })
            .catch((error) => {
              console.error(error);
            });
          return false;
        },

        handleSave(btn) {
          btn.loading = true;

          ButtonSave({
            tableCode: 'JE_CORE_RESOURCEBUTTON',
            // RESOURCEBUTTON_TYPE: 'GRID',
            RESOURCEBUTTON_CODE: state.formState.RESOURCEBUTTON_CODE,
            RESOURCEBUTTON_FUNCINFO_ID: state.funcId,
            RESOURCEBUTTON_NAME: state.formState.RESOURCEBUTTON_NAME,
            RESOURCEBUTTON_TYPE: state.formState.RESOURCEBUTTON_TYPE,
          })
            .then((res) => {
              Modal.message(res.message, 'success');
              const { data } = res;
              data.RESOURCEBUTTON_POSITION = data.RESOURCEBUTTON_POSITION
                ? data.RESOURCEBUTTON_POSITION.split(',')
                : [];
              state.visible = false;
              emit('changeModal', { type: 'refreshData', visible: false, data });

              btn.loading = false;
            })
            .catch((error) => {
              Modal.alert(error.message, 'error');
              btn.loading = false;
            });
        },
      };
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style lang="less" scoped></style>
